<template>
  <div class="nv-crud__default-layout" :style="{ backgroundColor: theme.tableHeaderColor }">
    <NCard v-if="searchVisible" class="nv-crud__search-card">
      <slot name="search" />
    </NCard>
    <NCard>
      <NFlex
        v-if="option.actionbar !== false || option.toolbar !== false"
        align="center"
        justify="space-between"
        style="margin-bottom: 10px;"
      >
        <slot name="actionbar" />

        <slot name="toolbar" />
      </NFlex>
      <slot name="multi-select-bar" />
      <slot name="table" />
    </NCard>
  </div>
</template>

<script setup lang="ts">
import type { NvCrudLayoutProps } from './types'
import { NCard, NFlex, useThemeVars } from 'naive-ui'

defineProps<NvCrudLayoutProps>()

const theme = useThemeVars()
</script>

<style lang="scss">
.nv-crud__search-card.n-card {
  margin-bottom: 10px;
  & > .n-card__content:first-child {
    padding-top: 10px;
  }
}
.n-card > .n-card__footer:first-child {
  padding-top: 20px;
}

.nv-toolbar {
  margin-left: auto;
}
</style>
